<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 联想_lenovo笔记本电脑_平板电脑_手机_台式机_服务器_外设数码_联想官网</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <!-- 第一个 -->
    <div id="foucs">
        <div class="foucs-slide">
            <a href="javascript:;" class="foucs-active">
                <img src="images/top1.jpg" alt="">
            </a>
            <a href="javascript:;">
                <img src="images/top2.jpg" alt="">
            </a>
            <a href="javascript:;">
                <img src="images/top3.jpg" alt="">
            </a>
            <a href="javascript:;">
                <img src="images/top4.jpg" alt="">
            </a>
            <a href="javascript:;">
                <img src="images/top5.jpg" alt="">
            </a>
            <a href="javascript:;">
                <img src="images/top6.jpg" alt="">
            </a>
            <a href="javascript:;">
                <img src="images/top7.jpg" alt="">
            </a>
            <a href="javascript:;">
                <img src="images/top8.jpg" alt="">
            </a>
            <a href="javascript:;">
                <img src="images/top9.jpg" alt="">
            </a>
            <a href="javascript:;">
                <img src="images/top10.jpg" alt="">
            </a>
        </div>
        <ul class="foucs-dot">
            <li class="foucs-active">
                <i class="foucs-def"></i>
            </li>
            <li>
                <i></i>
            </li>
            <li>
                <i></i>
            </li>
            <li>
                <i></i>
            </li>
            <li>
                <i></i>
            </li>
            <li>
                <i></i>
            </li>
            <li>
                <i></i>
            </li>
            <li>
                <i></i>
            </li>
            <li>
                <i></i>
            </li>
            <li>
                <i></i>
            </li>
        </ul>

        <div id="foucs-left">
            <img src="images/left.png" alt="">
        </div>
        <div id="foucs-right">
            <img src="images/right.png" alt="">
        </div>

    </div>
    <!-- 新闻中心 -->
    <div id="news">
        <div class="nav">
            <h2>新闻中心</h2>
            <span>更多 > </span>
        </div>
        <div class="news-banner">
            <div class="news-banner-center">
                <ul>
                    <li>
                        <img src="images/new1.jpg" alt="">
                    </li>
                    <li>
                        <img src="images/new2.png" alt="">
                    </li>
                    <li>
                        <img src="images/new3.png" alt="">
                    </li>
                </ul>
                <ol>
                    <li class="first"></li>
                    <li></li>
                    <li></li>
                </ol>
            </div>
            <!-- 左侧 -->
            <div class="news-banner-left">
                <div class="box change-box">
                    <div class="red change-color">01</div>
                    <div class="title">
                        <h4>联想问天重磅发布：助力企业加速构建...</h4>
                        <p>联想问天品牌+联想ThinkSystem锻造两大强...</p>
                        <span>2023年2月8日</span>
                        <i class="news-i">→</i>
                    </div>
                </div>
                <div class="box">
                    <div class="red">02</div>
                    <div class="title">
                        <h4>联想问天重磅发布：助力企业加速构建...</h4>
                        <p>联想问天品牌+联想ThinkSystem锻造两大强...</p>
                        <span>2023年2月8日</span>
                        <i>→</i>
                    </div>
                </div>
                <div class="box">
                    <div class="red">03</div>
                    <div class="title">
                        <h4>联想问天重磅发布：助力企业加速构建...</h4>
                        <p>联想问天品牌+联想ThinkSystem锻造两大强...</p>
                        <span>2023年2月8日</span>
                        <i>→</i>
                    </div>
                </div>

            </div>

        </div>
    </div>

    <!-- 联想公益 -->
    <div id="wrapper">
        <div class="nav">
            <h2>联想公益</h2>
            <span>更多 > </span>
        </div>
        <div class="main">
            <div class="slider" id="slider">
                <div class="slider_item left">
                    <img src="images/video1.gif" alt="">
                    <div class="bottom">
                        <h4>联想基金会赴乌兰察布开展“联想智学堂”项目回访</h4>
                        <p>联想基金会赴乌兰察布开展“联想智学堂”项目回访</p>
                        <span>了解更多></span>
                    </div>
                </div>
                <div class="slider_item center">
                    <img src="images/videos2.jpg" alt="">
                    <div class="bottom">
                        <h4>联想基金会赴乌兰察布开展“联想智学堂”项目回访</h4>
                        <p>联想基金会赴乌兰察布开展“联想智学堂”项目回访</p>
                        <span>了解更多></span>
                    </div>
                </div>
                <div class="slider_item right">
                    <img src="images/videos3.jpg" alt="">
                    <div class="bottom">
                        <h4>联想基金会赴乌兰察布开展“联想智学堂”项目回访</h4>
                        <p>联想基金会赴乌兰察布开展“联想智学堂”项目回访</p>
                        <span>了解更多></span>
                    </div>
                </div>
            </div>
            <div class="menu">
                <span class="btn btn_pre" onclick="pre()">&lt;</span>
                <span class="btn btn_next" onclick="next()">&gt;</span>
            </div>
        </div>
    </div>

    <!-- 成功案例 -->
    <div id="container">
        <div class="nav container-nav">
            <h2>成功案例</h2>
            <span>更多 > </span>
        </div>
        <div class="container-imgs">
            <a href="javascript:;" class="con-active">
                <img src="images/cg1.jpg" alt="">
            </a>
            <a href="javascript:;">
                <img src="images/cg2.jpg" alt="">
            </a>
            <a href="javascript:;">
                <img src="images/cg3.jpg" alt="">
            </a>
            <a href="javascript:;">
                <img src="images/cg4.jpg" alt="">
            </a>
        </div>
        <div class="container-titles">
            <div class="con-box con-box1 con-active">
                <div class="con-center">
                    <h4>智慧教育</h4>
                    <p>如何冲破环境恶劣，低IT维护水平阻力</p>
                </div>
            </div>
            <div class="con-box con-box2">
                <div class="con-center">
                    <h4>智慧教育</h4>
                    <p>如何冲破环境恶劣，低IT维护水平阻力</p>
                </div>

            </div>
            <div class="con-box con-box3">
                <div class="con-center">
                    <h4>智慧教育</h4>
                    <p>如何冲破环境恶劣，低IT维护水平阻力</p>
                </div>
            </div>
            <div class="con-box con-box4">
                <div class="con-center">
                    <h4>智慧教育</h4>
                    <p>如何冲破环境恶劣，低IT维护水平阻力</p>
                </div>
            </div>
        </div>
        <div class="con-left">&lt;</div>
        <div class="con-right">&gt;</div>
    </div>

    <!-- 热门推荐 -->
    <div id="cms">
        <div class="nav">
            <h2>热门推荐</h2>
            <div class="cms-nav-slect">
                <a href="javascript:;" class="cms-pre">&lt;</a>
                <a href="javascript:;" class="cms-next">&gt;</a>
            </div>
        </div>
        <div class="cms-banner">
            <div class="cms-banner-left">
                <h4 class="cms-show">
                    联想电脑管家
                    <img src="images/tj-left.png" alt="">
                </h4>
                <h4 class="cms-hidden">
                    以思考进化时代
                    <img src="images/tj-left.png" alt="">
                </h4>
                <h4 class="cms-hidden">
                    线下门店查询
                    <img src="images/tj-left.png" alt="">
                </h4>
                <h4 class="cms-hidden">
                    小薪家族新品上市
                    <img src="images/tj-left.png" alt="">
                </h4>
                <h4 class="cms-hidden">
                    元宇宙 换新季
                    <img src="images/tj-left.png" alt="">
                </h4>
                <h4 class="cms-hidden">
                    Think Book家族新品
                    <img src="images/tj-left.png" alt="">
                </h4>
                <h4 class="cms-hidden">
                    联想企业购
                    <img src="images/tj-left.png" alt="">
                </h4>
                <h4 class="cms-hidden">
                    联想社区
                    <img src="images/tj-left.png" alt="">
                </h4>
                <h4 class="cms-hidden">
                    W indow 11
                    <img src="images/tj-left.png" alt="">
                </h4>
            </div>
            <div id="cms-banner-swiper">
                <div class="cms-banner-swiper">
                    <div class="swiperItem b">
                        <a href="javascript:;">
                            <img src="images/tj1.jpg" alt="" class="cms-img">
                        </a>
                        <div class="cms-black">
                            <h4 class="cms-title">联想电脑管家</h4>
                            <p class="cms-des">专业工程师 为您解决问题</p>
                        </div>

                    </div>
                    <div class="swiperItem c">
                        <a href="javascript:;">
                            <img src="images/tj2.jpg" alt="" class="cms-img">
                        </a>
                        <div class="cms-black">
                            <h4 class="cms-title">以思考进化时代</h4>
                            <p class="cms-des">专业工程师 为您解决问题</p>
                        </div>
                    </div>
                    <div class="swiperItem def">
                        <a href="javascript:;">
                            <img src="images/tj3.jpg" alt="" class="cms-img">
                        </a>
                        <div class="cms-black">
                            <h4 class="cms-title">线下门店查询</h4>
                            <p class="cms-des">专业工程师 为您解决问题</p>
                        </div>
                    </div>
                    <div class="swiperItem def">
                        <a href="javascript:;">
                            <img src="images/tj4.jpg" alt="" class="cms-img">
                        </a>
                        <div class="cms-black">
                            <h4 class="cms-title">小薪家族新品上市</h4>
                            <p class="cms-des">专业工程师 为您解决问题</p>
                        </div>
                    </div>
                    <div class="swiperItem def">
                        <a href="javascript:;">
                            <img src="images/tj5.jpg" alt="" class="cms-img">
                        </a>
                        <div class="cms-black">
                            <h4 class="cms-title"> 元宇宙 换新季</h4>
                            <p class="cms-des">专业工程师 为您解决问题</p>
                        </div>
                    </div>
                    <div class="swiperItem def">
                        <a href="javascript:;">
                            <img src="images/tj6.jpg" alt="" class="cms-img">
                        </a>
                        <div class="cms-black">
                            <h4 class="cms-title"> Think Book家族新品</h4>
                            <p class="cms-des">专业工程师 为您解决问题</p>
                        </div>
                    </div>
                    <div class="swiperItem def">
                        <a href="javascript:;">
                            <img src="images/tj7.jpg" alt="" class="cms-img">
                        </a>
                        <div class="cms-black">
                            <h4 class="cms-title"> 联想企业购</h4>
                            <p class="cms-des">专业工程师 为您解决问题</p>
                        </div>
                    </div>
                    <div class="swiperItem def">
                        <a href="javascript:;">
                            <img src="images/tj8.jpg" alt="" class="cms-img">
                        </a>
                        <div class="cms-black">
                            <h4 class="cms-title">联想社区</h4>
                            <p class="cms-des">专业工程师 为您解决问题</p>
                        </div>
                    </div>
                    <div class="swiperItem a">
                        <a href="javascript:;">
                            <img src="images/tj9.jpg" alt="" class="cms-img">
                        </a>
                        <div class="cms-black">
                            <h4 class="cms-title">W indow 11</h4>
                            <p class="cms-des">专业工程师 为您解决问题</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</body>

</html>
<script src="js/jquery.min.js"></script>
<script src="js/foucs.js"></script>
<script src="js/news.js"></script>
<script src="js/gy.js"></script>
<script src="js/tj.js"></script>
<script src="js/cg.js"></script>